<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    {#      图标位置#}
    {#    <link rel="icon" href="../../favicon.ico">#}
    {#    <title>ORATK</title>#}
    <title>oratk 运维平台</title>
    {% block title %}
    {% endblock %}
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap-3.3/css/bootstrap.css" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="/static/bootstrap-3.3/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/static/bootstrap-3.3/css/dashboard.css" rel="stylesheet">
    <link href="/static/daterangepicker/css/daterangepicker.css" rel="stylesheet" type="text/css">

    <!-- loading_css -->
    <link href="/static/loading_css.css" rel="stylesheet">
    <link href="/static/loading_css_2.css" rel="stylesheet">
    <link href="/static/loading_css_tea.css" rel="stylesheet">
    <script src="/static/jquery-1.12.4.js"></script>
    <script>window.jQuery || document.write('<script src="/static/jquery-1.12.4.js""><\/script>')</script>
    <script src="/static/bootstrap-3.3/js/bootstrap.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <script src="/static/bootstrap-3.3/js/holder.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/static/bootstrap-3.3/js/ie10-viewport-bug-workaround.js"></script>
    {#时间#}
    <script src="/static/daterangepicker/js/moment.min.js"></script>
    <script src="/static/daterangepicker/js/daterangepicker.js"></script>
    {#     复制#}
    <script src="/static/clipboard/dist/clipboard.min.js"></script>
    <!-- bootstrap-select -->
    {#    <link rel="stylesheet"#}
    {#          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">#}
    {#    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>#}

    <script src="/static/bootstrap-select/1.12.4/bootstrap-select.min.js"></script>
    <link href="/static/bootstrap-select/1.12.4/bootstrap-select.min.css" rel="stylesheet">
    {#    添加截屏js#}
    <script src="/static/canvas2image.js"></script>
    <script src="/static/html2canvas.min.js"></script>

    {#    自定义 alert 提示框--js #}
    <script src="/static/sweetalert/sweetalert2.js"></script>
    {#    自定义 alert 提示框--css #}
    <style>
        /* 标题字体变大 */
        .swal-title {
            font-size: 24px !important; /* 标题字体更大 */
            font-weight: bold; /* 加粗标题 */
        }

        /* 主要文本（text）字体变大 */
        .swal-text {
            font-size: 18px !important; /* 增大说明文字 */
        }

        /* 调整 SweetAlert2 按钮大小 */
        .swal-confirm-button, .swal-cancel-button {
            font-size: 18px !important; /* 增大按钮字体 */
            padding: 12px 28px !important; /* 增大按钮尺寸 */
        }

        /* 调整 SweetAlert2 弹框背景透明度 */
        .swal-popup {
            background-color: rgba(255, 255, 255, 0.7) !important; /* 设置背景透明，0.5 表示50%透明 */
            box-shadow: none !important; /* 移除默认的阴影 */
        }

        /* 如果需要，也可以调整标题和文本的透明度（不影响背景） */
        .swal-title, .swal-text {
            opacity: 1 !important;

        /* 确保文本不受影响 */


        /* 默认（未选中）时第二行是深灰色 */
        .bootstrap-select .dropdown-menu li div small {
            color: #666; /* 或 gray */
        }

        /* 选中（蓝底）时第二行变成半透明白 */
        .bootstrap-select .dropdown-menu li.selected div small {
            color: rgba(255, 255, 255, 0.85);
        }

        }
    </style>

    {% block link_script %}
    {% endblock %}
    {% block style %}
    {% endblock %}

</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="row">
            <!-- 左侧内容 -->
            <div class="col-xs-6 col-md-3">
                <a class="navbar-brand" style="padding-left: 20px;">   {% if "oratk_app" in request.path %}
                    oratk工具_oracle
                {% elif "mytk_app" in request.path %}
                    oratk工具_mysql
                {% else %}
                    oratk工具
                {% endif %}</a>
            </div>
            <div class="col-xs-6 col-md-6 text-center d-flex justify-content-center align-items-center">
                <p id="current-time" class="navbar-text"
                   style="color: red; font-size: 18px; white-space:nowrap; padding-left: 30%">
                    <!-- 时间内容 -->
                </p>
            </div>

            <!-- 右侧操作按钮 -->
            <div class="col-xs-12 col-md-3 text-end">
                <a class="navbar-brand navbar-right" style="margin-right: 20px;">
                    <button type="button" class="btn btn-primary" onclick="save_html_as_png()">
                        <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>&nbsp截屏
                    </button>
                </a>
                <a class="navbar-brand navbar-right" href="/basic_app/logout">注销</a>
                <a class="navbar-brand navbar-right">{{ request.session.username }}</a>
                <a class="navbar-brand navbar-right">你好，</a>
            </div>
        </div>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar aaaa">
            <ul class="nav nav-sidebar" id="tag_id">
                {% block tag_left %}
                {% endblock %}
            </ul>
        </div>
        {% block userinfo %}
        {% endblock %}
    </div>
</div>

<!--倒茶loading特效-->
<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
    {#    <div class="wrapper">#}
    <div class="press">
        <div class="holder"></div>
        <div class="lid"></div>
        <div class="carafe">
            <div class="drop"></div>
            <div class="spout"></div>
            <div class="contents">
                <div class="grounds"></div>
                <div class="water"></div>
            </div>
        </div>
        <div class="plunger">
            <div class="shaft">
                <div class="knob"></div>
            </div>
            <div class="filter"></div>
        </div>
    </div>
</div>


<script>
    //模态框居中//
    // 监听所有模态框的显示事件
    $(".modal").on('show.bs.modal', function () {
         // 如果是 myModal，则跳过居中
    if ($(this).attr('id') === 'logmnr_myModal') {
        return;
    }
        modalResize($(this)); // 传入当前模态框
    });

    // 监听窗口大小变化，调整所有已显示的模态框
    $(window).resize(function () {
        $(".modal.show").each(function () {
            modalResize($(this));
        });
    });

    function modalResize(modal) {
        var winWidth = $(document.body).width();
        var modalWidth = modal.find(".modal-content").outerWidth();
        var width = (winWidth - modalWidth) / 2 + "px";

        modal.find(".modal-dialog").css({
            'margin-left': width
        });
    }


    //展示loading框
    showLoading = function () {
        $('#loadingModal').modal({backdrop: 'static', keyboard: false});
    }
    //隐藏掉loading框
    hideLoading = function () {
        $('#loadingModal').modal('hide');
    }
    $(document).ready(function () {
        //获取整个url
        {#var local = window.location.href;#}
        //获取不带参数的url
        var local = window.location.protocol + "//" + window.location.host + "" + window.location.pathname;
        {#var tda = $('.aaaa ul ul a');#}
        var tda = $('.aaaa ul  a');
        {#console.log(tda)#}
        for (i = 0; i < tda.length; i++) {
            if (tda[i].href.toLowerCase() == local.toLowerCase()) {   //如果当前地址和菜单栏的某个栏目地址相等
                tda[i].style = "color:#F00";//当前li标签用active样式
                var idn = tda[i].getAttribute('name'); // 获取当前标签的name值
                {#console.log(idn);#}
                $("#" + idn).css("color", "red");
                var dt = $("#" + idn).attr('name');
                $("#" + dt).collapse('show');
            }
        }
        //开启提示框
        $('[data-toggle="tooltip"]').tooltip();
    })

    //截屏js
    function save_html_as_png(filename = 'ora_screenshot') {
        var opts = {
            //scale: scale, // 添加的scale 参数
            //canvas: canvas, //自定义 canvas
            //logging: false, //日志开关，便于查看html2canvas的内部执行流程
            //width: width, //dom 原始宽度
            //height: height,
            useCORS: true // 【重要】开启跨域配置
        };
        html2canvas($('body')[0], opts).then(canvas => {
            //document.body.appendChild(canvas);
            // canvas宽度
            var canvasWidth = canvas.width;
            // canvas高度
            var canvasHeight = canvas.height;
            console.log(canvasHeight, canvasWidth);
            //sleep(2);
            // 调用Canvas2Image插件
            var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
            // 调用Canvas2Image插件
            Canvas2Image.saveAsImage(canvas, canvasWidth, canvasHeight, 'png', filename);
            console.log('ok');
        });
    }


    // 定义更新时间的函数
    function updateTime() {
        const now = new Date();
        const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        {#const formattedTime = `${now.toLocaleString()} ${days[now.getDay()]}`; // 日期时间 + 星期几#}
        const formattedTime = `${now.toLocaleString('zh-CN', {hour12: false})} ${days[now.getDay()]}`; // 日期时间 + 星期几
        document.getElementById('current-time').textContent = formattedTime;
    }

    // 设置定时器，每秒调用一次 updateTime
    setInterval(updateTime, 1000);

    // 页面加载完成后立即显示时间
    window.onload = updateTime;

    //自定义 alter 弹窗  text 格式
    function showAlert(title, result, iconType, iscancelButton, onConfirm) {
        // 使用 SweetAlert 弹窗
        Swal.fire({
            title: title,
            text: result,
            icon: iconType, // "error" 或 "success"
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            showCancelButton: iscancelButton, // 是否显示取消按钮
            customClass: {
                title: "swal-title",         // 标题样式
                htmlContainer: "swal-text",  // 主要文本样式
                confirmButton: "swal-confirm-button",
                cancelButton: "swal-cancel-button",
                popup: "swal-popup", // 设置背景透明度
            },
            didOpen: (popup) => {
                // 根据 iconType 改变文字颜色
                const textElement = popup.querySelector('.swal-text');
                const titleElement = popup.querySelector('.swal-title');

                if (iconType === "error") {
                    textElement.style.color = "red";   // 错误时，文本为红色
                } else if (iconType === "warning") {
                    textElement.style.color = "#f8bb86";
                } else {
                    textElement.style.color = "green";   // 成功时，文本为绿色
                }
            }
        }).then((result) => {
            if (result.isConfirmed && typeof onConfirm === "function") {
                onConfirm(); // 用户点击"确定"后调用 onConfirm
            }
        });
    }

    //自定义 alter 弹窗  html 格式
    function showAlert_html(title, result, iconType, iscancelButton, onConfirm) {
        // 定义不同类型的 SVG 图标
        const svgIcons = {
            success: `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="48" height="48">
                <circle cx="26" cy="26" r="25" fill="none" stroke="#4CAF50" stroke-width="2"/>
                <path fill="none" stroke="#4CAF50" stroke-width="4" d="M14 27l7 7 17-17"/>
            </svg>
        `,
            error: `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="48" height="48">
                <circle cx="26" cy="26" r="25" fill="none" stroke="#F44336" stroke-width="2"/>
                <line x1="16" y1="16" x2="36" y2="36" stroke="#F44336" stroke-width="4"/>
                <line x1="36" y1="16" x2="16" y2="36" stroke="#F44336" stroke-width="4"/>
            </svg>
        `,
            warning: `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="48" height="48">
                <circle cx="26" cy="26" r="25" fill="none" stroke="#FF9800" stroke-width="2"/>
                <line x1="26" y1="14" x2="26" y2="32" stroke="#FF9800" stroke-width="4"/>
                <circle cx="26" cy="38" r="2" fill="#FF9800"/>
            </svg>
        `
        };

        Swal.fire({
            title: title,
            html: result,
            iconHtml: svgIcons[iconType] || "",
            showClass: {
                popup: 'swal2-noanimation', // 去掉默认动画，不然SVG有时会缩放
            },
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            showCancelButton: iscancelButton,
            customClass: {
                title: "swal-title",
                htmlContainer: "swal-text",
                confirmButton: "swal-confirm-button",
                cancelButton: "swal-cancel-button",
                popup: "swal-popup",
                icon: "swal-icon", // 自定义 icon 容器
            },
            didOpen: (popup) => {
                popup.style.width = "auto";
                popup.style.maxWidth = "90vw";
                popup.style.minWidth = "300px";

                const textElement = popup.querySelector('.swal-text');
                if (iconType === "error") {
                    textElement.style.color = "red";
                } else if (iconType === "warning") {
                    textElement.style.color = "#f8bb86";
                } else {
                    textElement.style.color = "green";
                }
            }
        }).then((result) => {
            if (result.isConfirmed && typeof onConfirm === "function") {
                onConfirm();
            }
        });
    }


    function showconnectionAlert(XMLHttpRequest, textStatus, errorThrown) {
        try {
            let response = JSON.parse(XMLHttpRequest.responseText);
            var result = response.msg;
            var iconType = "error"
            var title = iconType === "error" ? "执行失败" : "执行成功"
            let iscancelButton = false;
            // 调用公共方法弹窗
            showAlert(title, result, iconType, iscancelButton);
        } catch (e) {
            alert("请求失败：" + XMLHttpRequest.responseText);
        }
    }
</script>
{% block script %}
{% endblock %}
</body>

</html>
